<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~  
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
  -->

<div ng-controller="UserRoleAssignmentController">
  <div class="fluid-grid">
    <div class="row-fluid fluid-grid-header">
      <div class="span3">
        <div class="fluid-grid-cell" openlmis-message="program.header"></div>
      </div>
      <div class="span3">
        <div class="fluid-grid-cell" openlmis-message="label.supervisory.node"></div>
      </div>
      <div class="span3">
        <div class="fluid-grid-cell" openlmis-message="create.user.role"></div>
      </div>
      <div class="span3">
        <div class="fluid-grid-cell">&nbsp;</div>
      </div>
    </div>

    <div class="row-fluid" ng-repeat="roleAssignment in user.supervisorRoles" tab-scroll>
      <div class="span3">
        <div class="fluid-grid-cell">
          <label ng-bind="getProgramName(roleAssignment.programId)"></label>
        </div>
      </div>
      <div class="span3">
        <div class="fluid-grid-cell">
          <label ng-bind="getSupervisoryNodeName(roleAssignment.supervisoryNode.id)"></label>
        </div>
      </div>
      <div class="span4">
        <div class="fluid-grid-cell">
          <select ui-select2 ng-model="roleAssignment.roleIds" openlmis-message="placeholder.add.role"
                  multiple="multiple" name="roles" id="roles" class="full-width"
                  ng-options="role.id as role.name for role in rolesMap.REQUISITION">
          </select>
        <span ng-show="roleAssignment.roleIds.length == 0" class="field-error" openlmis-message="missing.value">
        </span>
        </div>
      </div>
      <div class="span2">
        <input type="button" class="btn delete-role" value="delete"
               ng-click="deleteCurrentRow($index, 'supervisorRoles')"
               openlmis-message="button.remove"/>
      </div>
    </div>
  </div>

  <div class="add-role-row supervisory-roles" tab-scroll>
    <div class="row-fluid">
      <div class="span3">
        <div class="fluid-grid-cell">
          <select
            ng-options="program.id as program.name group by program.status for program in programsMap.all"
            id="programToSupervise" ng-model="selectedProgramIdToSupervise"
            ng-change="checkSupervisoryRolesDuplicity()">
            <option value="" openlmis-message="selectSuperviseProgramMessage"></option>
          </select>
          <span ng-show='hasMappingError(showSupervisorRoleMappingError,selectedProgramIdToSupervise)'
                class="field-error"
                openlmis-message="create.user.selectProgram">
          </span>
          <span ng-show='duplicateSupervisorRoleError' ng-bind="duplicateSupervisorRoleError"
                class="field-error"></span>
        </div>
      </div>
      <div class="span3">
        <div class="fluid-grid-cell">
          <select
            ng-options="supervisoryNode.id as supervisoryNode.name for supervisoryNode in supervisoryNodes"
            id="supervisoryNodeToSupervise" ng-model="selectedSupervisoryNodeIdToSupervise"
            ng-change="checkSupervisoryRolesDuplicity()">
            <option value="" openlmis-message="selectSupervisoryNodeMessage"></option>
          </select>
          <span ng-show='hasMappingError(showSupervisorRoleMappingError,selectedSupervisoryNodeIdToSupervise)'
                class="field-error"
                openlmis-message="create.user.selectSupervisoryNode">
          </span>
        </div>
      </div>

      <div class="span4 select2-roles">
        <div id="supervisoryRole" class="fluid-grid-cell">
          <select ui-select2 ng-model="selectedRoleIdsToSupervise" openlmis-message="placeholder.add.role"
                  multiple="multiple" class="full-width"
                  ng-options="role.id as role.name for role in rolesMap.REQUISITION">
          </select>
          <span ng-show='hasMappingError(showSupervisorRoleMappingError,selectedRoleIdsToSupervise)' class="field-error"
                openlmis-message="create.user.selectRoles">
          </span>
        </div>
      </div>

      <div class="span2">
        <div class="fluid-grid-cell">
          <input id="addSupervisoryRole" type="button" ng-click="addSupervisoryRole()" class="btn btn-primary"
                 openlmis-message="button.add"/>
        </div>
      </div>

    </div>
  </div>

  <div tabindex="-1" id="deleteRolesModal" modal="deleteRolesModal" close="deleteRolesModal=false">
    <div class="modal-header"><h3 openlmis-message="create.user.deleteRoles"></h3></div>
    <div class="modal-body">
      <p openlmis-message="create.user.delete.warning"></p>
    </div>
    <div class="modal-footer">
      <input type="button" class="btn btn-primary" ng-click="deleteSupervisorRole()"
             openlmis-message="button.ok"/>
      <input type="button" class="btn" ng-click="deleteRolesModal=false" openlmis-message="button.cancel"/>
    </div>
  </div>
</div>